<!DOCTYPE html>
<html>
    <head>
        <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.staticfile.org/axios/0.27.2/axios.min.js"></script>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
        <div id="app" class="demo">
            <ul>
                <li v-for="item in items" :key="item.id">
                    {{ item.text }}
                </li>
                <li v-for="n in event">
                    {{n}}
                </li>
            </ul>

            千米 : <input type = "text" v-model = "kilometers"  @focus="currentlyActiveField = 'kilometers'">
            米 : <input type = "text" v-model = "meters" @focus="currentlyActiveField = 'meters'">


            

        </div>
        <p id="info"></p> 


        <div id="watch-example">
            <p>输入一个问题，以 ? 号结尾输出答案:<input v-model="question"/></p>
            <p>{{answer}}</p>
          </div>

        <script>
            
            const app = {
                data(){
                    return {
                        items:[
                        { id: 1, text: 'Item 1' },
                        { id: 2, text: 'Item 2' },
                        { id: 3, text: 'Item 3' }
                        ],
                        numbers:[1,2,3,4,5,6,7,8],
                        kilometers:0,
                        meters:0
                    }
                },
                computed:{
                    event(){
                        return this.numbers.filter(number=>number % 2 === 0)
                    }
                },
                watch:{
                    kilometers:function(newVal,oldVal){
                        //判断是否是当前输入框
                        if(this.currentlyActiveField=="kilometers"){
                            this.kilometers = newVal;
                            this.meters = newVal * 1000;
                        }
                    },
                    meters:function(newVal,oldVal){
                        //判断是否是当前输入框
                        if(this.currentlyActiveField=="meters"){
                            this.kilometers = newVal/1000;
                            this.meters = newVal;
                        }
                    }
                }
            }

            vm = Vue.createApp(app).mount('#app')
            vm.$watch('kilometers',function(newVal,oldVal){
                //这个回调将在vm.kilometers改变后调用
                document.getElementById("info").innerHTML = "修改前值为: " + oldVal + "，修改后值为: " + newVal;
            })


            const watchExampleVM = Vue.createApp({
                data() {
                    return {
                        question: '',
                        answer: '每个问题结尾需要输入 ? 号。'
                    }
                },
                watch: {
                    // 每当问题改变时，此功能将运行，以 ? 号结尾，兼容中英文 ?
                    question(newQuestion, oldQuestion) {
                        if (newQuestion.indexOf('?') > -1 || newQuestion.indexOf('？') > -1) {
                            this.getAnswer()
                        }
                    }
                },
                methods: {
                    getAnswer() {
                        this.answer = '加载中...'
                        axios
                            .get('/try/ajax/json_vuetest.php')
                            .then(response => {
                            this.answer = response.data.answer
                        })
                            .catch(error => {
                            this.answer = '错误! 无法访问 API。 ' + error
                        })
                    }
                }
            }).mount('#watch-example')
        </script>
    </body>
</html>